<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<script type="text/javascript">
			//创建和初始化数组
			var course = new Array()
			course["初级"] = ['Java基础上','Java基础下','初级项目']
			course["中级"] = ['Web前端技术','Oracle数据库','Web后端技术','中级项目']
			course["高级"] = ['Hibernate','Stucts','Spring','高级项目']
			
			//初始化第一级 下拉选择框
			function initStage(){
				var stageSel = document.getElementById("stage")
				for (var i in course){//使用for…in…循环
					stageSel.add(new Option(i, i),null)
				}	
			}
			window.onload = initStage;
			
			//第二季下拉选择框，根据第一级的下拉选择框的内容进行动态的变动
			function changeStage(){
				//获取当前第一级下拉选择框的值
				var stageValue = document.getElementById("stage").value//获得选中的值 
				//获取第二级下拉选择框对象
				var courseSel = document.getElementById("course")
				//清空第二级课程下来列表框
				courseSel.options.length = 0;
				//根据第一级下拉选择框的内容 绑定第二级下拉选择框的内容项
				for(var i in course){
					if(i == stageValue){//在数组中匹配选中的值
						for(var j in course[i]){
							//给级联下拉列表添加列表项
							courseSel.add(new Option(course[i][j],course[i][j]),null)
						}
					}
				}
				
			} 
//			function showStage(){
//				var stageShow = document.getElementById("stageInfo")
//				var index = document.getElementById("stage").selectedIndex
//				var len = document.getElementById("stage").length
//				stageShow.innerHTML = "阶段下拉列表选项数目为：" + len + " 被选选项的索引号为：" + index;
//			} 
//			function showCourse(){
//				var courseShow = document.getElementById("courseInfo")
//				var index = document.getElementById("course").selectedIndex
//				var len = document.getElementById("course").length
//				courseShow.innerHTML = "课程下拉列表选项数目为：" + len + " 被选选项的索引号为：" + index;
//			}
		</script>
	</head>
	<body>
		<h3>课程评价</h3>
		<p>阶段选择：
			<select id="stage" style="width:150px;" onChange="changeStage()">
				<option>--请选择所处阶段--</option>
			</select>
		课程选择：
			<select id="course" style="width:150px;">
				<option>--请选择所学课程--</option>
			</select></p>
		<p><div id="stageInfo"></div></p>
		<p><div id="courseInfo"></div></p>
	</body>
</html>
